// 主题色
$primary-color: #ff4d4f;  // 主色调：红色
$primary-light: #ff7875;  // 浅红色
$primary-dark: #f5222d;   // 深红色
$primary-bg: rgba(#ff4d4f, 0.1);     // 红色背景

// 辅助色
$success-color: #52c41a;  // 成功色
$warning-color: #faad14;  // 警告色
$error-color: #ff4d4f;    // 错误色
$info-color: #1890ff;     // 信息色

// 文字颜色
$text-primary: #333333;   // 主要文字
$text-secondary: #666666; // 次要文字
$text-disabled: #999999;  // 禁用文字

// 背景色
$bg-primary: #ffffff;     // 主背景
$bg-secondary: #f5f5f5;   // 次背景
$bg-mask: rgba(0, 0, 0, 0.45); // 遮罩层

// 边框颜色
$border-color: #eeeeee;   // 边框色
$border-color-split: #f0f0f0; // 分割线

// 圆角
$border-radius-sm: 4rpx;  // 小圆角
$border-radius-md: 8rpx;  // 中圆角
$border-radius-lg: 16rpx; // 大圆角
$border-radius-circle: 50%; // 圆形

// 阴影
$box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); // 阴影
$box-shadow-hover: 0 4rpx 12rpx rgba(0, 0, 0, 0.2); // 悬浮阴影

// 间距
$spacing-xs: 8rpx;   // 极小间距
$spacing-sm: 16rpx;  // 小间距
$spacing-md: 24rpx;  // 中间距
$spacing-lg: 32rpx;  // 大间距
$spacing-xl: 48rpx;  // 极大间距

// 字体大小
$font-size-xs: 20rpx;  // 极小字号
$font-size-sm: 24rpx;  // 小字号
$font-size-md: 28rpx;  // 中字号
$font-size-lg: 32rpx;  // 大字号
$font-size-xl: 36rpx;  // 极大字号

// 动画
$animation-duration: 0.3s; // 动画时长
$animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); // 动画曲线

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin multi-ellipsis($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

@mixin card {
  background: $bg-primary;
  border-radius: $border-radius-md;
  box-shadow: $box-shadow;
  padding: $spacing-md;
}

@mixin button-primary {
  background: $primary-color;
  color: #fff;
  border: none;
  border-radius: $border-radius-md;
  padding: $spacing-sm $spacing-lg;
  font-size: $font-size-md;
  transition: all $animation-duration $animation-timing-function;

  &:active {
    background: $primary-dark;
    transform: scale(0.98);
  }
}

@mixin button-outline {
  background: transparent;
  color: $primary-color;
  border: 2rpx solid $primary-color;
  border-radius: $border-radius-md;
  padding: $spacing-sm $spacing-lg;
  font-size: $font-size-md;
  transition: all $animation-duration $animation-timing-function;

  &:active {
    background: $primary-bg;
    transform: scale(0.98);
  }
}

// 主题颜色变量
$themes: (
  wedding: (
    primary-color: #FF4D4F,
    primary-dark: #FF1F1F,
    primary-light: #FFE5E5,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #F5F5F5,
    tab-bar-color: #999999,
    tab-bar-active: #FF4D4F,
    icon-color: #FF4D4F,
    link-color: #FF4D4F,
    button-color: #FF4D4F,
    button-text-color: #FFFFFF,
    button-color-rgb: 255 71 87
  ),
  funeral: (
    primary-color: #2c3e50,
    primary-dark: #1a2634,
    primary-light: #3c546c,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #F5F5F5,
    tab-bar-color: #999999,
    tab-bar-active: #2c3e50,
    icon-color: #2c3e50,
    link-color: #2c3e50,
    button-color: #2c3e50,
    button-text-color: #FFFFFF,
    button-color-rgb: 44 62 80
  ),
  birthday: (
    primary-color: #FF4D4F,
    primary-light: #FFE5E5,
    primary-dark: #FF1F1F,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #F5F5F5,
    tab-bar-color: #999999,
    tab-bar-active: #FF4D4F,
    icon-color: #FF4D4F,
    link-color: #FF4D4F,
    button-color: #FF4D4F,
    button-text-color: #FFFFFF,
    button-color-rgb: 255 71 87
  ),
  graduation: (
    primary-color: #1890FF,
    primary-dark: #096DD9,
    primary-light: #E6F7FF,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #E6F7FF,
    tab-bar-color: #999999,
    tab-bar-active: #1890FF,
    icon-color: #1890FF,
    link-color: #1890FF,
    button-color: #1890FF,
    button-text-color: #FFFFFF,
    button-color-rgb: 24 144 255
  ),
  business: (
    primary-color: #722ED1,
    primary-dark: #531DAB,
    primary-light: #F9F0FF,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #F9F0FF,
    tab-bar-color: #999999,
    tab-bar-active: #722ED1,
    icon-color: #722ED1,
    link-color: #722ED1,
    button-color: #722ED1,
    button-text-color: #FFFFFF,
    button-color-rgb: 114 46 209
  ),
  housewarming: (
    primary-color: #52C41A,
    primary-dark: #389E0D,
    primary-light: #F6FFED,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #F6FFED,
    tab-bar-color: #999999,
    tab-bar-active: #52C41A,
    icon-color: #52C41A,
    link-color: #52C41A,
    button-color: #52C41A,
    button-text-color: #FFFFFF,
    button-color-rgb: 82 196 26
  ),
  fullmoon: (
    primary-color: #F759AB,
    primary-dark: #EB2F96,
    primary-light: #FFF0F6,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #FFF0F6,
    tab-bar-color: #999999,
    tab-bar-active: #F759AB,
    icon-color: #F759AB,
    link-color: #F759AB,
    button-color: #F759AB,
    button-text-color: #FFFFFF,
    button-color-rgb: 247 89 171
  ),
  longevity: (
    primary-color: #FAAD14,
    primary-dark: #D48806,
    primary-light: #FFFBE6,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #FFFBE6,
    tab-bar-color: #999999,
    tab-bar-active: #FAAD14,
    icon-color: #FAAD14,
    link-color: #FAAD14,
    button-color: #FAAD14,
    button-text-color: #FFFFFF,
    button-color-rgb: 250 173 20
  ),
  other: (
    primary-color: #13C2C2,
    primary-dark: #08979C,
    primary-light: #E6FFFB,
    text-primary: #333333,
    text-secondary: #666666,
    text-disabled: #999999,
    border-color: #EEEEEE,
    background-color: #E6FFFB,
    tab-bar-color: #999999,
    tab-bar-active: #13C2C2,
    icon-color: #13C2C2,
    link-color: #13C2C2,
    button-color: #13C2C2,
    button-text-color: #FFFFFF,
    button-color-rgb: 19 194 194
  )
);

// 获取主题颜色
@function getThemeColor($theme, $color) {
  @return map-get(map-get($themes, $theme), $color);
}

// 主题 mixin
@mixin themed($theme) {
  --button-color: #{map-get(map-get($themes, $theme), 'button-color')};
  --button-color-rgb: #{map-get(map-get($themes, $theme), 'button-color-rgb')};
  --button-text-color: #{map-get(map-get($themes, $theme), 'button-text-color')};
  --primary-dark: #{map-get(map-get($themes, $theme), 'primary-dark')};
  --primary-light: #{map-get(map-get($themes, $theme), 'primary-light')};
  --background-color: #{map-get(map-get($themes, $theme), 'background-color')};
  --text-primary: #{map-get(map-get($themes, $theme), 'text-primary')};
  --text-secondary: #{map-get(map-get($themes, $theme), 'text-secondary')};
  --border-color: #{map-get(map-get($themes, $theme), 'border-color')};
  --primary-color: #{map-get(map-get($themes, $theme), 'primary-color')};
}

// 主题样式
.theme-wedding {
  @include themed('wedding');
}

.theme-funeral {
  @include themed('funeral');
}

.theme-birthday {
  @include themed('birthday');
}

.theme-graduation {
  @include themed('graduation');
}

.theme-business {
  @include themed('business');
}

.theme-housewarming {
  @include themed('housewarming');
}

.theme-fullmoon {
  @include themed('fullmoon');
}

.theme-other {
  @include themed('other');
}

// 导出主题变量
:export {
  @each $theme, $colors in $themes {
    @each $color, $value in $colors {
      #{unquote($theme)}-#{$color}: $value;
    }
  }
}

// 全局 CSS 变量
:root {
  // 基础变量
  --bg-color: #{$bg-secondary};
  --primary-color: #{$primary-color};
  --text-primary: #{$text-primary};
  --text-secondary: #{$text-secondary};
  --text-tertiary: #{$text-disabled};
  --card-bg: #{$bg-primary};
  --active-bg: #{$primary-color};
  --active-text: #fff;
  --money-color: #{$primary-color};
  --tab-hover: #{$primary-bg};
  --button-text-color: #FFFFFF;
}

// 生成主题 CSS 变量
@each $theme, $map in $themes {
  .theme-#{$theme} {
    --primary-color: #{map-get($map, primary-color)};
    --primary-dark: #{map-get($map, primary-dark)};
    --primary-light: #{map-get($map, primary-light)};
    --text-primary: #{map-get($map, text-primary)};
    --text-secondary: #{map-get($map, text-secondary)};
    --text-disabled: #{map-get($map, text-disabled)};
    --border-color: #{map-get($map, border-color)};
    --background-color: #{map-get($map, background-color)};
    --button-color: #{map-get($map, button-color)};
    --button-text-color: #{map-get($map, button-text-color)};
    --button-color-rgb: #{map-get($map, button-color-rgb)};
  }
}

// 设置页面背景色
page {
  background-color: var(--background-color);
}

// 导航栏主题样式
@each $theme, $map in $themes {
  .theme-#{$theme} {
    .uni-navbar {
      background-color: map-get($map, primary-color) !important;
      
      .uni-navbar__header-title {
        color: map-get($map, button-text-color) !important;
      }
      
      .uni-navbar__btn {
        color: map-get($map, button-text-color) !important;
      }
    }
  }
} 